﻿@{
    Layout = null;
}
<script src="@Url.Content("~/scripts/playList.js")"></script>
<div class="bigBox well container">

@*Início Cabeçalho*@
    <div class="navbar-inner">
        <span class="form-search">
            <span class="input-append">
            <input type="text" class="span2 search-query">
            <button type="submit" class="btn searchFriends zeroSearch">Pesquisar</button>
            <button type="submit" class="btn searchFriends firstSearch noMusic">Pesquisar</button>
            <button type="submit" class="btn searchFriends secondSearch noMusic">Pesquisar</button>
            <button type="submit" class="btn searchFriends thirdSearch noMusic">Pesquisar</button>
            </span>
        </span>
        
        <ul class="nav nav-pills">
            <li class="guide-03"><a href="#">Artistas</a></li>
            <li class="guide-01"><a href="#">Músicas</a></li>
            <li class="guide-02"><a href="#">Álbuns</a></li>
        </ul>
    </div>
@*Fim Cabeçalho*@

@*Início conteúdo*@
    <div class="contentMusic">
        <ul class="thumbnails">
            @*Primeira Pesquisa*@
            <li class="searchMusic noMusic">
                <span class="queueMusic" id="PL-1"></span><span class="music"><span class="nMusic">Secret</span><span class="nArtist">Maroon 5 → Soung About Jane</span></span>
                <span class="queueMusic"></span><span class="music"><span class="nMusic">Secret</span><span class="nArtist">The Pierces → Trirteen Tales os Love and Revenge</span></span>
                <span class="queueMusic"></span><span class="music ult"><span class="nMusic">Secret</span><span class="nArtist">Seal → Commitment</span></span>
            </li>

            <li class="searchMusic noMusic">
                <span class="queueMusic"></span><span class="music"><span class="nMusic">Secret</span><span class="nArtist">One Republic → Walking Up</span></span>
                <span class="queueMusic"></span><span class="music"><span class="nMusic">Secret</span><span class="nArtist">Madonna → Bedtime Stories</span></span>
                <span class="queueMusic"></span><span class="music ult"><span class="nMusic">Secret</span><span class="nArtist">Ocean Labs → Sirens os the Sea</span></span>
            </li>

            <li class="searchMusic noMusic">
                <span class="queueMusic"></span><span class="music"><span class="nMusic">Secret</span><span class="nArtist">The Veronicas → The Secret Life</span></span>
                <span class="queueMusic"></span><span class="music"><span class="nMusic">Secret</span><span class="nArtist">Leaves' Eyes → Lovelorn</span></span>
                <span class="queueMusic"></span><span class="music ult"><span class="nMusic">Secret</span><span class="nArtist">Luis Fonci → Fight the Feeling</span></span>
            </li>

            <li class="searchMusic noMusic">
                <span class="queueMusic"></span><span class="music"><span class="nMusic">Secret</span><span class="nArtist">Matt Costa → Mobile Chateau</span></span>
                <span class="queueMusic"></span><span class="music"><span class="nMusic">Secret</span><span class="nArtist">Audio Adrenaline → Bloom</span></span>
                <span class="queueMusic"></span><span class="music ult"><span class="nMusic">Secret Door</span><span class="nArtist">Evanescence → Evanescence</span></span>
            </li>

            <li class="searchMusic noMusic">
                <span class="queueMusic"></span><span class="music"><span class="nMusic">Secret Door</span><span class="nArtist">Artic Monkeys → Hamburg</span></span>
                <span class="queueMusic"></span><span class="music"><span class="nMusic">Flora's Secret</span><span class="nArtist">Enya → A Day Without Rain</span></span>
                <span class="queueMusic"></span><span class="music ult"><span class="nMusic">Secret Agent</span><span class="nArtist">NetSky → NetSky</span></span>
            </li>

            @*Segunda Pesquisa*@
            <li class="searchAlbum noMusic">
                <span class="queueMusic"></span><span class="music"><span class="nMusic">Once</span><span class="nArtist">Pearl Jam → Ten</span></span>
                <span class="queueMusic"></span><span class="music"><span class="nMusic">Even Flow</span><span class="nArtist">Pearl Jam → Ten</span></span>
                <span class="queueMusic"></span><span class="music ult"><span class="nMusic">Alive</span><span class="nArtist">Pearl Jam → Ten</span></span>
            </li>

            <li class="searchAlbum noMusic">
                <span class="queueMusic"></span><span class="music"><span class="nMusic">Why Go</span><span class="nArtist">Pearl Jam → Ten</span></span>
                <span class="queueMusic" id="PL-2"></span><span class="music"><span class="nMusic">Black</span><span class="nArtist">Pearl Jam → Ten</span></span>
                <span class="queueMusic"></span><span class="music ult"><span class="nMusic">Jeremy</span><span class="nArtist">Pearl Jam → Ten</span></span>
            </li>

            <li class="searchAlbum noMusic">
                <span class="queueMusic"></span><span class="music"><span class="nMusic">Oceans</span><span class="nArtist">Pearl Jam → Ten</span></span>
                <span class="queueMusic"></span><span class="music"><span class="nMusic">Porch</span><span class="nArtist">Pearl Jam → Ten</span></span>
                <span class="queueMusic"></span><span class="music ult"><span class="nMusic">Garden</span><span class="nArtist">Pearl Jam → Ten</span></span>
            </li>

            <li class="searchAlbum noMusic">
                <span class="queueMusic"></span><span class="music"><span class="nMusic">Deep</span><span class="nArtist">Pearl Jam → Ten</span></span>
                <span class="queueMusic"></span><span class="music"><span class="nMusic">Release</span><span class="nArtist">Pearl Jam → Ten</span></span>
            </li>

            @*Terceira Pesquisa*@
            <li class="searchSinger noMusic">
                <span class="queueMusic"></span><span class="music"><span class="nMusic">Backstage Pt. 1</span><span class="nArtist">Eminem → Live from New York City</span></span>
                <span class="queueMusic"></span><span class="music"><span class="nMusic">Oslo</span><span class="nArtist">Eminem → All Access Europe</span></span>
                <span class="queueMusic"></span><span class="music ult"><span class="nMusic">London</span><span class="nArtist">Eminem → All Access Europe</span></span>
            </li>

            <li class="searchSinger noMusic">
                <span class="queueMusic"></span><span class="music"><span class="nMusic">On Fire</span><span class="nArtist">Eminem → Recovery</span></span>
                <span class="queueMusic" id="PL-3"></span><span class="music"><span class="nMusic">Hello</span><span class="nArtist">Eminem → Relapse</span></span>
                <span class="queueMusic"></span><span class="music ult"><span class="nMusic">Puke</span><span class="nArtist">Eminem → Encore</span></span>
            </li>

            <li class="searchSinger noMusic">
                <span class="queueMusic"></span><span class="music"><span class="nMusic">Ass Like That</span><span class="nArtist">Eminem → Live from New York City</span></span>
                <span class="queueMusic"></span><span class="music"><span class="nMusic">Square Dance</span><span class="nArtist">Eminem → The Eminem Show</span></span>
                <span class="queueMusic"></span><span class="music ult"><span class="nMusic">R.A.K.I.M</span><span class="nArtist">Eminem → 8 mile</span></span>
            </li>

            <li class="searchSinger noMusic">
                <span class="queueMusic"></span><span class="music"><span class="nMusic">Time Of My Life</span><span class="nArtist">Eminem → 8 mile</span></span>
                <span class="queueMusic"></span><span class="music"><span class="nMusic">Seduction</span><span class="nArtist">Eminem → Recovery</span></span>
                <span class="queueMusic"></span><span class="music ult"><span class="nMusic">'97 Bonnie & Clyde</span><span class="nArtist">Eminem → The Slim Shady</span></span>
            </li>

            <li class="searchSinger noMusic">
                <span class="queueMusic"></span><span class="music"><span class="nMusic">Manchester</span><span class="nArtist">Eminem → All Access Europe</span></span>
                <span class="queueMusic"></span><span class="music"><span class="nMusic">Open Mic</span><span class="nArtist">Eminem → Infinite</span></span>
                <span class="queueMusic"></span><span class="music ult"><span class="nMusic">Mosh</span><span class="nArtist">Eminem → Encore</span></span>
            </li>

            <li class="searchSinger noMusic">
                <span class="queueMusic"></span><span class="music"><span class="nMusic">Ridaz</span><span class="nArtist">Eminem → Recovery</span></span>
                <span class="queueMusic"></span><span class="music"><span class="nMusic">My Band</span><span class="nArtist">Eminem → Live from New York City</span></span>
                <span class="queueMusic"></span><span class="music ult"><span class="nMusic">W.E.G.O</span><span class="nArtist">Eminem → Infinite</span></span>
            </li>

            <li class="searchSinger noMusic">
                <span class="queueMusic"></span><span class="music"><span class="nMusic">Maxine</span><span class="nArtist">Eminem → Infinite</span></span>
                <span class="queueMusic"></span><span class="music"><span class="nMusic">Till I Collapse</span><span class="nArtist">Eminem → The Eminem Show</span></span>
                <span class="queueMusic"></span><span class="music ult"><span class="nMusic">Cum On Everybody</span><span class="nArtist">Eminem → The Slim Shady</span></span>
            </li>

            <li class="searchSinger noMusic">
                <span class="queueMusic"></span><span class="music"><span class="nMusic">Evil Deeds</span><span class="nArtist">Eminem → Encore</span></span>
                <span class="queueMusic"></span><span class="music"><span class="nMusic">Amsterdam</span><span class="nArtist">Eminem → All Access Europe</span></span>
                <span class="queueMusic"></span><span class="music ult"><span class="nMusic">Battle</span><span class="nArtist">Eminem → 8 mile</span></span>
            </li>

            <li class="searchSinger noMusic">
                <span class="queueMusic"></span><span class="music"><span class="nMusic">Tonya</span><span class="nArtist">Eminem → Relapse</span></span>
                <span class="queueMusic"></span><span class="music"><span class="nMusic">Underground</span><span class="nArtist">Eminem → Relapse</span></span>
                <span class="queueMusic"></span><span class="music ult"><span class="nMusic">Lose Yourself</span><span class="nArtist">Eminem → Live from New Y</span></span>
            </li>

        </ul>
    </div>
@*Fim conteúdo*@

    <div>
        <ul class="pager pForum">
            <li class="previous disabled">
                <a href="#">&larr; Older</a>
            </li>
            <li class="next disabled">
                <a href="#">Newer &rarr;</a>
            </li>
        </ul>
    </div>

@*Início da lista do Rodapé*@
    <div class="contentPlay">
        <ul class="thumbnails">
            <li class="listMusic PL-3 noMusic">
                <a href="#" class="thumbnail">
                    <span class="imageCD"></span>
                    <span class="detailsMusic">
                        <span class="nameMusic">Eminen</span>
                        <span class="nameArtist">Hello</span>  
                    </span>
                </a>
            </li>

            <li class="listMusic PL-1 noMusic">
                <a href="#" class="thumbnail">
                <span class="imageCD"></span>
                <span class="detailsMusic">
                    <span class="nameMusic">Secret</span>
                    <span class="nameArtist">Maroon 5</span>  
                </span>
                </a>
            </li>

            <li class="listMusic PL-2 noMusic">
                <a href="#" class="thumbnail">
                    <span class="imageCD"></span>
                    <span class="detailsMusic">
                        <span class="nameMusic">Black</span>
                        <span class="nameArtist">Pearl Jam</span>  
                    </span>
                </a>
            </li>
            
            <li class="listMusic PL-3 noMusic">
                <a href="#" class="thumbnail">
                    <span class="imageSave"></span>
                    <span class="detailsMusic">
                        <span class="nameMusic">Salvar</span>
                        <span class="nameArtist">PlayList</span>  
                    </span>
                </a>
            </li>
            <li>
                <span class="alert alert-music noMusic">
                    <input class="span3" type="text" placeholder="Título da sua PlayLyst">
                    <button class="btn btn-danger cancelSaveList">Cancelar</button>
                    <button class="btn btn-inverse confirmSaveList">Confirmar</button>
                </span>
                <span class="alert alert-success noMusic">
                    Sua Playlist foi salva!
                </span>
            </li>
        </ul>
    </div>
@*Fim da lista do Rodapé*@
</div>